<template>
    <div class="Product_Flow" ref="contentBox">
        <div class="Raphael_warp" ref="paper"></div>
    </div>
</template>
<script>
import machine from '../../assets/dev/dev_small.png'
import debounce from '@/mixins/debounce'
export default {
    data(){
        return{
            paper:null,
            PList:[
                {name:'产品管理',fid:'flow1',method:'ArrowTrapezoid',ldx:0,ldy:800,pic:'machine'},
                {name:'产品\n制丝批次',fid:'flow2',method:'ArrowTrapezoid',ldx:480,ldy:630,pic:'machine'},
                {name:'卷包机台\n生产批次',fid:'flow3',method:'FourBianBox',ldx:880,ldy:450,pic:'machine'}
            ],
            endPoint:{
                flow1:{x1:0,y1:0},
                flow2:{x1:0,y1:0},
                flow3:{x1:0,y1:0}
            },
            flow1:{
                left:{x1:0,y1:0,x2:0,y2:0},
                middle:{x1:0,y1:0,x2:0,y2:0},
                right:{x1:0,y1:0,x2:0,y2:0}
            },
            flow2:{
                left:{x1:0,y1:0,x2:0,y2:0},
                middle:{x1:0,y1:0,x2:0,y2:0},
                right:{x1:0,y1:0,x2:0,y2:0}
            },
            flow3:{
                left:{x1:0,y1:0,x2:0,y2:0},
                middle:{x1:0,y1:0,x2:0,y2:0},
                right:{x1:0,y1:0,x2:0,y2:0}
            },
            flowList1:[
                {name:'产品数据',ldx:10,ldy:490,pic:'machine',direction:'left',parentNode:'flow1'},
                {name:'产品技术标准',ldx:125,ldy:455,pic:'machine',direction:'middle',parentNode:'flow1'},
                {name:'产品质量检验标准',ldx:290,ldy:520,pic:'machine',direction:'right',parentNode:'flow1'}
            ],
            flowList2:[
                {name:'烟叶批次',ldx:360,ldy:250,pic:'machine',direction:'left',parentNode:'flow2'},
                {name:'投梗丝批次',ldx:565,ldy:210,pic:'machine',direction:'middle',parentNode:'flow2'},
                {name:'储丝柜编码',ldx:760,ldy:250,pic:'machine',direction:'right',parentNode:'flow2'},
            ],
            flowList3:[
                {
                    name:'烟丝批次',ldx:1280,ldy:140,pic:'machine',
                    children:[
                        {name:'辅料到货批次',position:'top'},
                        {name:'辅料到货批次',position:'middle'},
                        {name:'辅料到货批次',position:'bottom',
                            children:[
                                {
                                    name:'辅料到货批次',position:'top',
                                    name:'辅料到货批次',position:'bottom'
                                }
                            ]
                        },
                        // {name:'辅料入库信息',position:'middle'},
                    ]
                },
                {
                    name:'辅料批次',ldx:1280,ldy:250,pic:'machine',
                    children:[
                        {name:'辅料到货批次',position:'top'},
                        {name:'辅料入库信息',position:'middle'},
                        {name:'辅料配盘批次',position:'bottom'}
                    ]
                },
                {
                    name:'成型批次',ldx:1280,ldy:360,pic:'machine',
                    children:[
                        {name:'嘴棒辅料信息',position:'top'},
                        {name:'在线检验信息',position:'middle'},
                        {name:'成型设备生产信息',position:'bottom'}
                    ]
                },
                {
                    name:'检验批次',ldx:1280,ldy:470,pic:'machine',
                    children:[
                        {
                            name:'过程检验信息',position:'middle',
                            children:[
                                {name:'巡检',position:'top'},
                                {name:'抽检',position:'bottom'}
                            ]
                        },
                    ]
                },
                {
                    name:'卷包工单',ldx:1280,ldy:605,pic:'machine',
                    children:[
                        {name:'自检',position:'top'},
                        {name:'产品二维码',position:'bottom'}
                    ]
                },
                {name:'件烟二维码',ldx:1280,ldy:760,pic:'machine'}
            ],
            Picture:{
                machine:machine
            },
            TrapStyle:{
                trap:{
                    "fill":"#004558",
                    "stroke":'#004558'
                },
                connect:{
                    "fill":'#003848',
                    'stroke':'#003848'
                },
                text:{
                    'fill':'#fff',
                    'font-size':18
                }
            },
            BoxStyle:{
                box:{
                    "fill":"#004558",
                    "stroke":"#13a8c4",
                    "stroke-width":1,
                    'cursor':'pointer'
                },
                text:{
                    'fill':'#fff',
                    'font-size':14,
                    'cursor':'pointer'
                }
            },
            CurveStyle:{    // 曲线箭头样式
                path:{
                    "stroke":'#00a34a',
                    "stroke-width":6
                },
                arrow:{
                    "fill":'#00a34a',
                    "stroke":'#00a34a',
                }
            },
            bottomW:20,
            size:16,
            boxNode:{
                wPad:12,
                hPad:8,
                radius:5
            },
            picSize:{
                small:{
                    width:90,
                    height:40,
                    padd:5
                },
                big:{
                    width:116,
                    height:80,
                    padd:10
                }
            },
            curveSize:{
                rxLen1:8,
                ryLen1:10,
                rxLen2:15,
                ryLen2:15,
                radius1:10,
                radius2:30,
                sumWidth:60,
                sumHeight:30,
                xOffset:15,
                verOffset:6
            },
        }
    },
    mixins:[debounce],
    mounted(){
        this.initPaper()
    },
    methods:{
        initPaper(){
            this.paper = Raphael(this.$refs.paper)
            this.resizeHandle()
            this.DrawOnPaper()
        },
        debounceEvents(){
            this.paper.clear()
            let box = this.$refs.contentBox.getBoundingClientRect()
            this.paper.setSize(box.width,box.height)
            this.DrawOnPaper()
        },
        DrawOnPaper(){
            this.paper.setViewBox(0,0,1920,850,true)
            let self = this
            // 主流程
            this.PList.forEach(item=>{
                self[item.method](item)
            })

            // 流程1 list
            this.flowList1.forEach(item=>{
                self.BasicPicBox(item, 116, 80)
            })

            // 流程2 
            this.flowList2.forEach(item=>{
                self.BasicPicBox(item, 116, 80)
            })

            // 流程三
            this.drawFlow3List()

            for(let key in this.flow1){
                this.DrawCurveArrow(this.flow1[key])
            }
            for(let key in this.flow2){
                this.DrawCurveArrow(this.flow2[key])
            }

            this.FlowItemConnectOne(
                this.endPoint.flow1.x1,
                this.endPoint.flow1.y1,
                this.PList[1].ldx,
                this.PList[1].ldy
            )

            this.FlowItemConnectTwo(
                this.endPoint.flow2.x1,
                this.endPoint.flow2.y1,
                this.PList[2].ldx,
                this.PList[2].ldy
            )
        },
        drawFlow3List(){
            // 第三流程列表  起始(startX, startY)
            let self = this;
            let startX = this.endPoint.flow3.x1, startY = this.endPoint.flow3.y1;
            let picW = 90, picH = 40
            
            this.flowList3.forEach((item,index)=>{
                let endArrowX = item.ldx, endArrowY = item.ldy - (14+picH+8)/2
                // 起点距离第一个弧度起点的距离 
                let xOffset = Math.abs(startY-endArrowY)>190?40:90
                self.drawFlow3Arrow(startX, startY, endArrowX, endArrowY, xOffset)
                self.drawFlow3Children(item, picW, picH)
            })

        },
        drawFlow3Children(item){
            // 流程三 递归子流程节点
            let wPad = this.boxNode.wPad, 
                hPad = this.boxNode.hPad, 
                radius = this.boxNode.radius,
                picW = this.picSize.small.width, 
                picH = this.picSize.small.height, 
                picPad = this.picSize.small.padd;
                
            let boxW = item.name.length*this.BoxStyle.text['font-size'] + wPad*2
            let boxH = this.BoxStyle.text['font-size'] + hPad*2
            let self = this

            // 递归 第一级别节点 Y坐标 取文字框和图片中间 对应子节点的{pos:middle}的Y坐标
            let parentStartX = item.ldx + boxW, parentStartY = item.ldy-(boxH+picPad+picH)/2

            // 第一级 父节点
            this.NodeTextBox(item.ldx, item.ldy, item.name)
            
            let picX = item.ldx + (boxW - picW)/2 
            let picY = item.ldy - boxH - picPad - picH 
            this.paper.image(
                self.Picture[item.pic],
                picX,picY,picW,picH
            )

            // 递归子节点
            if(item.children&&item.children.length) this.LoopFlowNodes(item.children, parentStartX, parentStartY)
        },
        LoopFlowNodes(nodeList, parentStartX, parentStartY){
            let self = this
            let startX = parentStartX, startY = parentStartY
            let sumWidth = this.curveSize.sumWidth, 
                sumHeight = this.curveSize.sumHeight,
                verOffset = this.curveSize.verOffset,
                wPad = this.boxNode.wPad,
                hPad = this.boxNode.hPad,
                fontH = this.BoxStyle.text['font-size']
            nodeList.forEach((node, index)=>{
                self.NodeCurvePath(node, startX, startY)
                let childStartY
                if(node.position=="top"){
                    self.NodeTextBox(
                        startX+sumWidth,
                        startY-verOffset-sumHeight+fontH/2+hPad,
                        node.name
                    )
                    childStartY = startY-verOffset-sumHeight
                }
                if(node.position=="bottom"){
                    self.NodeTextBox(
                        startX+sumWidth,
                        startY+verOffset+sumHeight+fontH/2+hPad,
                        node.name
                    )
                    childStartY = startY+verOffset+sumHeight
                }
                if(node.position=="middle"){
                    self.NodeTextBox(
                        startX+sumWidth,
                        startY+fontH/2+hPad,
                        node.name
                    )
                    childStartY = startY
                }

                let childStartX = startX+sumWidth+node.name.length*fontH+2*wPad
                
                if(node.children&&node.children.length) self.LoopFlowNodes(node.children, childStartX, childStartY)
            })
        },
        NodeCurvePath(node, startX, startY){
            // xOffset : 起点距离第一个弧度起点的距离 verOffset: top bottom middle 三条线的起点间距
            let sumWidth = this.curveSize.sumWidth, 
                sumHeight = this.curveSize.sumHeight, 
                xOffset = this.curveSize.xOffset, 
                verOffset = this.curveSize.verOffset,
                rxLen1 = this.curveSize.rxLen1,
                ryLen1 = this.curveSize.ryLen1,
                rxLen2 = this.curveSize.rxLen2,
                ryLen2 = this.curveSize.ryLen2,
                radius1 = this.curveSize.radius1,
                radius2 = this.curveSize.radius2
            let pathArr = []
            let self = this
            let endX = startX+sumWidth,
                topStartY = startY - verOffset,
                bottomStartY = startY + verOffset,
                topEndY = startY-sumHeight-verOffset,
                middleEndY = startY,
                bottomEndY = startY+sumHeight+verOffset

            let curvePath = {
                "stroke":'#00a34a',
                "stroke-width":4
            }

            if(node.position=='top'){
                pathArr = [
                    "M",startX, topStartY,
                    "L",startX+xOffset, topStartY,
                    "A",radius1, radius1, 0, 0, 0, startX + xOffset + rxLen1, topStartY-ryLen1,
                    "L",startX + xOffset + rxLen1, topEndY+ryLen2,
                    "A",radius2, radius2, 0, 0, 1, startX + xOffset + rxLen1 + rxLen2, topEndY,
                    "L",endX, topEndY
                ]
                // 曲线
                this.paper.path(pathArr).attr(curvePath)
            }else if(node.position=='bottom'){
                pathArr = [
                    "M",startX, bottomStartY,
                    "L",startX+xOffset, bottomStartY,
                    "A", radius1, radius1, 0, 0, 1, startX + xOffset + rxLen1, bottomStartY+ryLen1,
                    "L", startX + xOffset + rxLen1, bottomEndY - ryLen2,
                    "A", radius2, radius2, 0, 0, 0, startX + xOffset + rxLen1 + rxLen2, bottomEndY,
                    "L",endX, bottomEndY
                ]
                // 曲线
                this.paper.path(pathArr).attr(curvePath)
            }else if(node.position=="middle"){
                // node.position=='bottom'
                pathArr = [
                    "M", startX, startY,
                    "L", endX, middleEndY
                ]
                // 曲线
                this.paper.path(pathArr).attr(curvePath)
            }else{}
        },
        NodeTextBox(ldx, ldy, text){
            let wPad = this.boxNode.wPad, 
                hPad = this.boxNode.hPad, 
                radius = this.boxNode.radius,
                self = this
            
            let boxW = text.length*this.BoxStyle.text['font-size'] + wPad*2
            let boxH = this.BoxStyle.text['font-size'] + hPad*2
            // 框体
            this.paper.rect(
                ldx, 
                ldy-boxH, 
                boxW, boxH, radius
            ).attr(self.BoxStyle.box)
            
            // 内容
            this.paper.text(
                ldx + boxW/2,
                ldy - boxH/2,
                text
            ).attr(self.BoxStyle.text)
        },
        drawFlow3Arrow(startX, startY, endX, endY, xOffset){
            // 流程三的箭头
            // 起始 startX,startY  结束 endX,endY  起点距离第一个弧度起点的距离:xOffset
            // rxLen 弧度x轴长度 ryLen 弧度Y轴的长度
            let radius1 = 10, radius2 = 30, rxLen1=8 ,ryLen1=10 ,rxLen2=18 ,ryLen2=18, arrowW = 10
            let pathArr = [], self = this
            if((startY-endY)>30){
                // 上箭头
                pathArr = [
                    "M", startX, startY,
                    "L", startX + xOffset, startY,
                    "A", radius1, radius1, 0, 0, 0, startX + xOffset + rxLen1, startY-ryLen1,
                    "L", startX + xOffset + rxLen1, endY + ryLen2,
                    "A", radius2, radius2, 0, 0, 1, startX + xOffset + rxLen1 + rxLen2, endY,
                    "L", endX - arrowW , endY
                ]

                // 曲线
                this.paper.path(pathArr).attr(self.CurveStyle.path)

                // 箭头
                this.paper.path(
                    self.setCubeArrow(endX-arrowW, endY, endX, endY)
                ).attr(self.CurveStyle.arrow)
            }else if((endY-startY)>30){
                // 下箭头
                pathArr = [
                    "M", startX, startY,
                    "L", startX + xOffset, startY,
                    "A", radius1, radius1, 0, 0, 1, startX + xOffset + rxLen1, startY+ryLen1,
                    "L", startX + xOffset + rxLen1, endY - ryLen2,
                    "A", radius2, radius2, 0, 0, 0, startX + xOffset + rxLen1 + rxLen2, endY,
                    "L", endX - arrowW, endY
                ]
                // 曲线
                this.paper.path(pathArr).attr(self.CurveStyle.path)

                // 箭头
                this.paper.path(
                    self.setCubeArrow(endX-arrowW, endY, endX, endY)
                ).attr(self.CurveStyle.arrow)
            }else{
                // 水平箭头
                pathArr = [
                    "M", startX, startY,
                    "L", endX - arrowW, startY
                ]

                this.paper.path(pathArr).attr(self.CurveStyle.path)

                this.paper.path(
                    self.setCubeArrow(endX-arrowW, startY, endX, startY)
                ).attr(self.CurveStyle.arrow)
            }
        },
        setCubeArrow(x1,y1,x2,y2){
            // 箭头
            var self = this;
            var angle = Raphael.angle(x1, y1, x2, y2);
            var a45 = Raphael.rad(angle - 45);
            var a45m = Raphael.rad(angle + 45);
            var x2a = x2 + Math.cos(a45) * this.size;
            var y2a = y2 + Math.sin(a45) * this.size;
            var x2b = x2 + Math.cos(a45m) * this.size;
            var y2b = y2 + Math.sin(a45m) * this.size;

            var result = ["M", x1, y1, "L", x2, y2, "L", x2a, y2a, "L", x2b, y2b,"L", x2, y2];
            return result
        },
        DrawCurveArrow({x1, y1, x2, y2},direction){
            // 流程1、2的曲线箭头
            // A rx 水平半径 ry 垂直半径  x-axis-rotation x轴旋转0/1 large-arc-flag 大弧度0/1 sweep-flag 顺时针1/0
            // console.log('解构')
            
            // 箭头起始 x1,y1  结束 x2,y2    rxLen：箭头第一个弧度x轴长度  rx1：第一个弧度的水平/垂直半径 
            let rxLen1=8 ,ryLen1=10 ,rxLen2=18 ,ryLen2=18 ,radius1=10 ,radius2=30, lenOffset=4
            let self = this
            let pathArr = []
            // console.log( x1-x2 )
            if((x1-x2)>=(rxLen1+rxLen2+lenOffset)){
                // 左箭头   第一个弧度顺时针 2、逆时针
                pathArr = [
                    "M", x1, y1,
                    "A", radius1, radius1, 0, 0, 1, x1-rxLen1, y1-ryLen1,
                    "L", x1-rxLen1, y2 + ryLen2,
                    "A", radius2, radius2, 0, 0, 0, x1-rxLen1-rxLen2, y2,
                    "L", x2, y2
                ]

                // 曲线
                this.paper.path(pathArr).attr(self.CurveStyle.path)

                // 箭头  向左延伸10
                this.paper.path(
                    self.setCubeArrow(x2, y2, x2-10,y2)
                ).attr(self.CurveStyle.arrow)

            }else if((x2-x1)>=(rxLen1+rxLen2+lenOffset)){
                // 右箭头  1、顺 2、逆
                pathArr = [
                    "M", x1, y1,
                    "A", radius1, radius1, 0, 0, 0, x1+rxLen1, y1-ryLen1,
                    "L", x1+rxLen1, y2 + ryLen2,
                    "A", radius2, radius2, 0, 0, 1, x1+rxLen1+rxLen2, y2,
                    "L", x2, y2
                ]

                // 曲线
                this.paper.path(pathArr).attr(self.CurveStyle.path)
                
                // 箭头 向右延伸10
                this.paper.path(
                    self.setCubeArrow(x2, y2, x2+10,y2)
                ).attr(self.CurveStyle.arrow)

            }else{
                // 纵向箭头
                pathArr = [
                    "M", x2, y1,
                    "L", x2, y2
                ]
                this.paper.path(pathArr).attr(self.CurveStyle.path)
                
                // 箭头 向右延伸10
                this.paper.path(
                    self.setCubeArrow(x2, y2, x2, y2-5)
                ).attr(self.CurveStyle.arrow)
            }
        },
        BasicPicBox(item, pW, pH){
            // 标题+图片
            let ldx = item.ldx, ldy = item.ldy , wPad = 12, hPad = 8, picW = pW, picH = pH, picPad = 5, radius = 5
            let boxW = item.name.length*this.BoxStyle.text['font-size'] + wPad*2
            let boxH = this.BoxStyle.text['font-size'] + hPad*2
            // 盒子
            let boxX = ldx
            let boxY = ldy - boxH

            
            let self = this
            this.paper.rect(
                boxX, boxY,
                boxW, boxH,radius
            ).attr(self.BoxStyle.box)

            // 字
            let Textx = ldx + boxW/2;
            let Texty = ldy - boxH/2;
            this.paper.text(Textx, Texty, item.name).attr(self.BoxStyle.text)

            // 图
            let picX = ldx + (boxW - picW)/2
            let picY = ldy - boxH - picPad - picH
            this.paper.image(
                self.Picture[item.pic],
                picX,
                picY,
                picW,
                picH
            )
            
            
            
            if( item.parentNode ){
                this[item.parentNode][item.direction].x2 = ldx+boxW/2
                this[item.parentNode][item.direction].y2 = ldy+boxH/2
            }     
        },
        FourBianBox(item){
            //  左边箭头 坐标(ldx,ldy) 逆时针坐标
            let ldx = item.ldx, ldy = item.ldy, arrowOffset = this.bottomW, xOffset1 = 42, yOffset1 = 55, xLen = 120 , lineH = 30, picW = 116, picH = 80, picPad = 10

            let pathArr = [
                "M", ldx, ldy,
                "L", ldx + arrowOffset, ldy,
                "L", ldx + arrowOffset + xOffset1, ldy + yOffset1,
                "L", ldx + arrowOffset + xOffset1 + xLen, ldy + yOffset1,
                "L", ldx + arrowOffset + xOffset1*2 + xLen, ldy - lineH/2,
                "L", ldx + arrowOffset + xOffset1 + xLen, ldy - lineH - yOffset1,
                "L", ldx + arrowOffset + xOffset1, ldy - lineH - yOffset1,
                "L", ldx + arrowOffset, ldy - lineH,
                "L", ldx, ldy - lineH,
                "L", ldx + arrowOffset*0.75, ldy - lineH/2,
                "L", ldx, ldy
            ]

            // 形状
            let self = this
            this.paper.path(pathArr).attr(self.TrapStyle.trap)

            // 字
            let Textx = ldx + arrowOffset + xOffset1 + xLen/2
            let Texty = ldy + yOffset1/2

            this.paper.text(
                Textx,
                Texty,
                item.name
            ).attr(self.TrapStyle.text)
            
            // 图片
            let picX = ldx + arrowOffset + xOffset1
            let picY = ldy - lineH - yOffset1
            
            this.paper.image(
                self.Picture[item.pic],
                picX,
                picY,
                picW,
                picH
            )

            // 结束中心点
            this.endPoint.flow3.x1 = ldx + arrowOffset + xOffset1*2 + xLen
            this.endPoint.flow3.y1 = ldy - lineH/2

        },
        ArrowTrapezoid(item){
            // 箭头梯形
            // 参数 左下角(ldx,ldy)  总长 sl  底高 bh (总高的一半) 箭头偏移 arrowOffset   
            let ldx = item.ldx, ldy = item.ldy, sl = 270, bh = 30, arrowOffset = this.bottomW*0.75, trapOffset = 30, trapW = 30, tUpw = 116, picW = 116, picH = 80, picPad = 10
            let rdx = ldx + sl;
            let ruy = ldy - 2*bh
            let arrowRx = rdx + arrowOffset;
            let arrowRy = ldy - bh/2;
            let rmy = ldy - bh;
            let trapRdx = rdx - trapOffset;
            let trapRux = trapRdx - trapW;
            let trapLux = trapRux - tUpw;

            let pathArr = [
                "M", ldx, ldy, 
                "L", rdx, ldy, 
                "L", arrowRx, arrowRy, 
                "L", rdx, rmy, 
                "L", trapRdx, rmy, 
                "L", trapRux, ruy, 
                "L", trapLux, ruy, 
                "L", trapLux - trapW, rmy, 
                "L", ldx ,rmy
            ]

            let self = this
            let trap1 = this.paper.path(pathArr).attr(self.TrapStyle.trap)
            
            // 字
            let Textx = trapLux + tUpw/2
            let Texty = ruy+bh/2+9
            this.paper.text(
                Textx,
                Texty,
                item.name
            ).attr(self.TrapStyle.text)

            // 图
            let picX = trapLux
            let picY = ruy-picPad-picH
            
            this.paper.image(
                self.Picture[item.pic],
                trapLux,
                ruy-picPad-picH,
                picW,
                picH
            )

            // 图片对应箭头连接 (左中右)
            
            this[item.fid].left.x1 = trapLux
            this[item.fid].left.y1 = ruy -  picPad - picH/2
            this[item.fid].middle.x1 = trapLux + picW/2
            this[item.fid].middle.y1 = ruy - picPad - picH
            this[item.fid].right.x1 = trapLux + picW
            this[item.fid].right.y1 = ruy -  picPad - picH/2

            // 流程之前的连接 (右下坐标  对应 起始点)
            this.endPoint[item.fid].x1 = rdx
            this.endPoint[item.fid].y1 = ldy
        },
        FlowItemConnectOne(x1,y1,x2,y2){
            // 缝隙
            let gap = 10, bottomW = this.bottomW
            let startX = x1+gap, startY = y1

            // 左起 〗
            this.DrawSanjiao(startX, startY);

            // 竖直连接
            let verbx = startX+bottomW, verby = y1, verux = startX+bottomW, veruy = (y1+y2)/2 
            this.DrawVerticalConnect(verbx, verby, verux, veruy)

            // 水平连接
            this.DrawHorizontalConnect(
                verux,
                veruy,
                x2-gap-bottomW-30,
                veruy
            )

            // 左起 〗
            this.DrawSanjiao(x2-bottomW-30, veruy);

            // 竖直连接
            this.DrawVerticalConnect(x2-30, veruy, x2-30, y2)

            // 三角
            this.paper.path([
                "M", x2-30, y2,
                "L", x2, y2,
                "L", x2, y2-30,
                "L", x2-30, y2
            ]).attr(this.TrapStyle.trap)
        },
        FlowItemConnectTwo(x1, y1, x2, y2){
            let gap = 10, bottomW = this.bottomW 

            // 左起 〗
            this.DrawSanjiao(
                x1+gap,
                y1
            )

            // 竖直连接
            this.DrawVerticalConnect(
                x1+gap+bottomW,
                y1,
                x1+gap+bottomW,
                y2
            )

            // 水平连接
            this.DrawHorizontalConnect(
                x1+gap+bottomW,
                y2,
                x2-gap,
                y2,
            )
        },
        DrawSanjiao(startX,startY){
            // 左下 为起点
            let bottomW = this.bottomW   // 底部宽地
            let pathArr = [
                "M", startX, startY,
                "L", startX+bottomW, startY,
                "L", startX+bottomW, startY-30,
                "L", startX, startY-30,
                "L", startX+bottomW*0.75, startY-15,
                "L", startX, startY
            ]
            this.paper.path(pathArr)
            .attr(this.TrapStyle.trap)
        },
        DrawVerticalConnect(x1, y1, x2, y2){
            // 逆时针  左下 x1,y1  左上 x2.y2
            this.paper.path([
                "M", x1, y1,
                "L", x1+30, y1-30,
                "L", x1+30, y2,
                "L", x2, y2,
                "L", x1, y1
            ]).attr(this.TrapStyle.connect)
        },
        DrawHorizontalConnect(x1, y1, x2, y2){
            // 逆时针  左下 x1,y1 右下 x2,y2
            this.paper.path([
                "M", x1, y1,
                "L", x2, y2,
                "L", x2+this.bottomW*0.75, y2-15,
                "L", x2, y2-30,
                "L", x1+30, y2-30,
                "L", x1, y1
            ]).attr(this.TrapStyle.trap)
        }
    }
}
</script>
<style lang="scss" scoped>
.Product_Flow{
    width: 100%;
    height: 100%;
    position: relative;
    overflow: hidden;
    .Raphael_warp{
        width: 100%;
        height: 100%;
    }
}
</style>